import React from 'react';
import styles from './index.module.less';
import { ProCard, useToken } from 'szcd';
import { styled } from '@umijs/max';

const TemplateModeFork: React.FC<any & React.HtmlHTMLAttributes<HTMLDivElement>> = (props) => {
  const token = useToken();
  const Status = styled.div`
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 24px;
    color: ${token.colorText};
    font-weight: 600;
    font-size: 16px;
    border-bottom: ${token['cyan-1']};
`;

  return (
    <ProCard
      split={'vertical'}
      style={{ padding: 0 }}
      className={styles.card}
      title={props.title ? <Status>{props.title}</Status> : undefined}
      extra={props.extra}
      headerBordered
      {...props.allContentBoxProps}
    >
      {props.LeftContent && (
        <ProCard
          {...props.leftContentBoxProps}
          ghost
          style={{ height: '100%' }}
          className="leftContentBox"
        >
          {props.LeftContent}
        </ProCard>
      )}
      <ProCard
        wrap
        ghost
        style={props.rightboxStyle || { padding: '16px 24px' }}
        className="rightContentBox"
        {...props.rightContentBoxProps}
      >
        {props.Query && (
          <ProCard colSpan={24} ghost className="rightContentBox_top">
            {props.Query}
          </ProCard>
        )}
        {props.PageContent && (
          <ProCard
            colSpan={24}
            ghost
            className="rightContentBox_bottom"
            {...props.rightContentBoxProps_bottom}
          >
            {props.PageContent}
          </ProCard>
        )}
      </ProCard>
    </ProCard>
  );
};

export default TemplateModeFork;
